<template>
	<view>
		<cu-custom rightAll>
			银行账户转账
		</cu-custom>
		<view class="main padding-lr">
			<u-form class="" :model="form" labelWidth="90" ref="uForm"
				:labelStyle="{padding: '10rpx 0'}">
				<view class="bgcolor-ffffff form-range">
					<u-form-item label="收款人" prop="form.receivingName" borderBottom>
						<u--input
							v-model="form.receivingName"
							placeholder="试试拼音首字母进行检索"
							placeholderStyle="color:rgb(178,178,178)"
							border="none"
							inputAlign="right"></u--input>
						<image slot="right" class="register-icon"
							src="/static/transfer-account/peoples.png" mode="aspectFit"></image>
					</u-form-item>
					<u-form-item label="收款账号" prop="form.oppositeAccount" borderBottom>
						<u--input
							v-model="form.oppositeAccount"
							placeholder="请输入收款账号"
							placeholderStyle="color:rgb(178,178,178)"
							border="none"
							inputAlign="right"></u--input>
						<image slot="right" class="xiangji-icon" src="/static/transfer-account/camera.png"
							mode="aspectFit">
						</image>
					</u-form-item>
					<u-form-item label="收款银行" prop="form.receivingBank" borderBottom @click="openBankPopup">
						<view class="u-flex u-flex-items-center u-flex-end w100">
							<text :class="{'disabled-text': bankCurrent == -1}">{{curBank.title || '请选择收款银行'}}</text>
							<image class="bank-arrow margin-left-sm margin-right-xs"
								src="/static/common/arrow_right_blue_large.png"
								mode="aspectFit"></image>
						</view>
					</u-form-item>
				</view>

				<view class="bgcolor-ffffff form-range margin-top-sm">
					<u-form-item label="付款账户" prop="name" borderBottom>
						<view class="account u-flex u-flex-items-center u-flex-end">
							<view class="u-flex-y u-flex-center margin-right-xs">
								<view class="margin-bottom-sm card-num color-theme text-right">
									{{_userinfo.encryCardNum}}
								</view>
								<text class="color-949494 text-right">
									可用余额
									<text class="banlance">￥{{_userinfo.formatBalance}}</text>
								</text>
							</view>
							<image class="arrow" src="/static/common/down_arrow2.png" mode="aspectFit"></image>
						</view>
					</u-form-item>
				</view>

				<view class="bgcolor-ffffff form-range margin-top-sm money">
					<u-form-item label="转账金额" labelPosition="top" prop="form.amountMoney" borderBottom>
						<view class="u-flex-y w100" @click="focusMoney">
							<view class="u-flex u-flex-items-center">
								<text class="symbol">
									{{form.amountMoney? '￥': ''}}
								</text>
								<text class="num" :class="{placeText: !form.amountMoney}">
									{{foramtMoney || '免手续费 请输入转账金额'}}
								</text>
								<u--input
									style="position: absolute;top: -990px;width: 50px;"
									v-model="inputMoney"
									type="number"
									:focus="focus"
									autoBlur
									@blur="focus = false"
									border="none"></u--input>
							</view>

							<view class="u-flex u-flex-items-center margin-left-lg" v-show="form.amountMoney">
								<text :class="{'wan margin-right-sm': bigMoney.length>1 && !index }"
									v-for="item,index in bigMoney" :key="index">
									{{item}}
								</text>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="受理方式" labelWidth="32%" prop="method" borderBottom>
						<view class="u-flex u-flex-items-center u-flex-around w100">
							<view class="method u-flex u-flex-items-center" @click="acceptanceMethod = index"
								v-for="item,index in payMethods" :key="index">
								<image class="radio-img"
									:src="`/static/common/large_dialog_checkbox_${acceptanceMethod == index? 'select': 'normal'}.png`"
									mode="aspectFit"></image>
								{{item}}
							</view>
						</view>
					</u-form-item>
					<view class="text-right color-949494 padding-tb-sm padding-lr submit-tip">
						立即提交，不可撤回
					</view>
				</view>

				<view class="bgcolor-ffffff form-range margin-top-sm">
					<u-form-item label="通知收款人" borderBottom>
						<u--input
							placeholder="如需通知请输入手机号"
							placeholderStyle="color:rgb(178,178,178)"
							border="none"
							inputAlign="right"></u--input>
						<image slot="right" class="register-icon"
							src="/static/transfer-account/mobile.png" mode="aspectFit"></image>
					</u-form-item>
					<u-form-item label="附言" borderBottom>
						<u--input
							placeholder="选填,输入上限30个字"
							placeholderStyle="color:rgb(178,178,178)"
							border="none"
							inputAlign="right"></u--input>
						<image slot="right" class="register-icon"
							src="/static/transfer-account/smart_transfer_register_bene_blue.webp" mode="aspectFit">
						</image>
					</u-form-item>
				</view>

				<custom-button :conBg="themeColor">
					<text @click="submit" class="w100 text-center">
						确认
					</text>
				</custom-button>
			</u-form>
			<view class="tips u-flex-y">
				<text class="">
					若收款银行需选择分支行，请 <text class="color-theme margin-left-xs">点击更换转账模式</text>
				</text>
				<view class="tips__title">
					温馨提示：
				</view>
				<text v-for="(item,index) in tips" :key="index" :class="{'important': item.isImportant}">
					{{index+1}}. {{item.text}}
				</text>
			</view>
		</view>
		<u-popup :show="showBankList" mode="right"
			@close="closeBankPopup"
			bgColor="transparent" safeAreaInsetTop>
			<view class="bank-list">
				<view class="nav rela u-flex u-flex-items-center u-flex-center">
					<image @click="closeBankPopup" class="close-icon abso" src="/static/common/ccb_close.webp"
						mode="aspectFit"></image>
					<text>
						收款银行
					</text>
				</view>
				<view class="list-box u-flex-y u-flex-items-center">
					<view class="list-item padding-sm u-flex u-flex-items-center"
						v-for="(item,index) in bankList" :key="index" @click="bankItemClick(index)">
						<image class="bank-icon margin-right-sm"
							:src="`/static/bank-icons/bank_icon_${item.icon || 'default'}.webp`"
							mode="aspectFit"></image>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import NavbarMixins from '@/common/mixins/navbar-mixins.js';
	import { PAY_METHODS } from '@/common/data/Enum.js';

	export default {
		mixins: [NavbarMixins()],
		data() {
			return {
				form: {
					// 收款户名
					receivingName: '',
					// 收款账号
					oppositeAccount: '',
					// 收款银行
					receivingBank: '',
					// 转账金额
					amountMoney: '',
				},
				inputMoney: '',
				// 受理方式
				acceptanceMethod: 0,
				showBankList: false,
				bankList: [
					{ title: '中国建设银行', icon: 'jianshe' },
					{ title: '中国工商银行', icon: 'gongshang' },
					{ title: '中国农业银行', icon: 'nongye' },
					{ title: '中国银行', icon: 'zhongguo' },
					{ title: '交通银行', icon: 'jiaotong' },
					{ title: '光大银行', icon: 'guangda' },
					{ title: '广发银行', icon: 'guangfa' },
					{ title: '华夏银行', icon: 'huaxia' },
					{ title: '民生银行', icon: 'mingsheng' },
					{ title: '浦发银行', icon: 'pufa' },
					{ title: '兴业银行', icon: 'xingye' },
					{ title: '招商银行', icon: 'zhaoshang' },
					{ title: '中信银行', icon: 'zhongxin' },
					{ title: '江苏银行', icon: 'jiangshu' },
					{ title: '上海银行', icon: 'shanghai' },
					{ title: '浙商银行', icon: '' },
				],
				bankCurrent: -1,
				payMethods: PAY_METHODS,
				focus: false,
				foramtMoney: '',
				// payMethodCur: 0,
				themeColor: this.$ThemeColor,
				tips: [
				{
					text: '2016年1月1日起，通过手机银行进行转账交易免收手续费。',
					isImportant: false,
				},
				{
					text: '谨防电话、短信、邮件、假网站等诈骗，不要向陌生账户汇款、转账！',
					isImportant: true,
				},
				{
					text: '为了您的资金安全，请勿轻信陌生人通过网络聊天群、直播、电话、短信等方式进行的诱导性“投资理财”推荐，谨防被骗，请到合法正规金融机构办理投资理财业务。',
					isImportant: true,
				},
				{
					text: '受理方式为交易提交时间，而非资金到账时间，资金实际转入收款账户时间视人民银行和收款行处理情况而定。对于选择“普通”和“T+1”受理方式的转账，您可在限定时间内通过手机银行“明细查询-延时转账明细”进行撤销。',
					isImportant: false,
				},
				{
					text: '如收款账号为本行账户，请根据业务类型实际情况准确选择“个人”或“公司”后转账。',
					isImportant: false,
				},
				{
					text: '银行账号转账单笔及日累计限额以手机银行转账汇款单笔及日累计交易限额为准。',
					isImportant: false,
				},
				{
					text: '每天16点到18点期间人行网上跨行支付清算系统账务处理较为繁忙，请尽量避免在此期间办理100万元(含)以下跨行汇款交易，以免资金不能实时入账。给您带来的不便，敬请谅解。',
					isImportant: false,
				},
				{
					text: '按照人民银行规定，汇款金额大于100万元时，收款行需选择详细开户行网点，业务受理时间为每个法定工作日前一日(T-1日)20:30至法定工作日(T日)17:15。汇款金额小于100万元(含)的交易支持7*24小时受理，人民银行公告的暂停的情况除外，具体可咨询95580。',
					isImportant: false,
				},
				{
					text: '短信通知收款人不收取服务费，为确保您的短信通知服务及时准确，请准确填写通知收款人的手机号码。',
					isImportant: false,
				},
				{
					text: '对于短信客户和开通令牌认证模式的令牌客户，其单笔转账金额为5万元至20万元(含)或日累计转账金额为5万元至50万元(含)的，将采用人脸识别、短信验证码、交易密码中一种或多种方式验证。',
					isImportant: false,
				}]
			};
		},
		computed: {
			curBank() {
				return this.bankList[this.bankCurrent] || {};
			},
			isSureSubmit() {
				let disabled = false;
				Object.keys(this.form).forEach(key => {
					if (!this.form[key]) {
						disabled = true;
						return;
					}
				});
				return disabled;
			},
			bigMoney() {
				return this.dealBigMoney(this.form.amountMoney);
			}
		},
		watch: {
			focus(val, oVal) {
				if (!val) {
					this.inputMoney = '.';
				}
			},
			inputMoney(val) {
				// console.debug(val.charAt(0));
				if (val !== '.') {
					val = val.charAt(0) == '0' ? val.slice(1) : val;
					this.form.amountMoney = val;
				}
			}
		},
		onLoad() {
			this.themeColor = this.$ThemeColor;
		},
		methods: {
			focusMoney() {
				this.focus = true;
			},
			submit() {
				console.log('submit');
				if (!this.isSureSubmit) {
					this.$Tips.loading('请稍后...');
					this.$api.addBankFlowingwater({
						cardId: this._userinfo.id,
						type: 0,
						abstractInfo: '',
						postscript: '',
						acceptanceMethod: this.acceptanceMethod,
						// 付款账户
						paymentAccount: this._userinfo.cardNumber,
						...this.form
					}).then((res) => {
						this.initUserinfo();
						this.$store.dispatch('set_params', { id: res.data.data });
						this.$Router.push({
							name: 'transfer-result'
						});
					}).finally(() => this.$Tips.loaded());
				}
			},
			openBankPopup() {
				this.showBankList = true;
			},
			closeBankPopup() {
				this.showBankList = false;
			},
			bankItemClick(index) {
				this.bankCurrent = index;
				this.form.receivingBank = this.curBank.title;
				this.closeBankPopup();
			},
			dealBigMoney(n) {
				if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)) {
					this.foramtMoney = '';
					return '';
				}
				let unit = '仟佰拾亿仟佰拾万仟佰拾圆角分',
					str = '';
				let spotSplit = n.split('.');
				let decimal = spotSplit[1];
				if (decimal) {
					if (decimal < 9) {
						spotSplit[1] = decimal + '0';
						n = spotSplit.join('.');
					}
				} else {
					n += '.00';
				}
				// n = this.priceFormat(n);
				// this.form.amountMoney = n;
				// console.log(n, );
				this.foramtMoney = this.priceFormat(n);
				let p = n.indexOf('.');
				if (p >= 0) {
					n = n.substring(0, p) + n.substr(p + 1, 2);
					unit = unit.substr(unit.length - n.length);
				}

				for (var i = 0; i < n.length; i++) {
					str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);
				}
				str = str.replace(/零(仟|佰|拾|角)/g, '零')
					.replace(/(零)+/g, '零')
					.replace(/零(万|亿|圆)/g, '$1')
					.replace(/(亿)万|壹(拾)/g, '$1$2')
					.replace(/^圆零?|零分/g, '')
					.replace(/圆$/g, '圆整');
				let result = str.split('万');
				// console.debug(n, this.foramtMoney, str, result);
				if (result.length > 1) {
					result[0] += '万';
				}
				return result;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main {
		padding-bottom: 20rpx;


		.form-range {
			border-radius: 12rpx;

			::v-deep .u-form-item__body {
				padding-right: 20rpx;
				padding-left: 20rpx;
			}

			::v-deep .u-form-item__body__left {
				align-self: baseline;
			}

			.account {
				width: 100%;
				font-size: 30rpx;

				.arrow {
					width: 34rpx;
					height: 34rpx;
					align-self: baseline;
				}

				.banlance {
					color: rgb(245, 138, 15)
				}
			}

			.method {
				.radio-img {
					width: 48rpx;
					height: 48rpx;
					margin-right: 6rpx;
				}
			}

			.submit-tip {
				font-size: 30rpx;
			}
		}

		.register-icon {
			width: 84rpx;
			height: 84rpx;
		}

		.xiangji-icon {
			width: 66rpx;
			height: 66rpx;
		}

		.disabled-text {
			color: rgb(192, 196, 204);
		}

		.money {
			.wan {
				color: rgb(197, 37, 43);
				// margin-right: 12rpx;
			}

			.symbol,
			.num {
				font-size: 40rpx;
				font-weight: 500;
			}

			.num {
				&.placeText {
					color: rgb(178, 178, 178);
					font-size: 30rpx;
				}
			}

		}

		.tips {
			margin-top: 80rpx;
			line-height: 1.5;
			color: rgb(119, 119, 119);
			font-size: 30rpx;
			text-align: justify;
			word-break: break-all;

			&__title {
				font-size: 36rpx;
			}

			text {
				text-indent: 60rpx;
			}

			.important {
				color: rgb(214, 0, 0);
			}
		}

		::v-deep .bottom-btn {
			margin-top: 40rpx;
			@include themeBgColor;
			color: #fff;
			justify-content: center;
			padding: 30rpx 0;
			font-size: 36rpx;
			border-radius: 12rpx;
		}
	}

	.bank-list {
		margin: auto;
		min-width: 60vw;
		// background-color: #fff;
		// border-radius: 40rpx;

		.nav {
			border-radius: 16rpx 0rpx 0 0;
			color: #fff;
			padding: 20rpx 10rpx;
			@include themeBgColor;
			font-size: 28rpx;

			.close-icon {
				width: 30rpx;
				height: 30rpx;
				left: 20rpx;
			}
		}

		.list-box {
			background-color: #fff;
			border-radius: 0rpx 0 0 16rpx;
			max-height: 50vh;
			overflow-y: auto;

			.list-item {
				width: 100%;
				font-size: 26rpx;

				&:not(:last-child) {
					border-bottom: 2rpx solid #ccc;
				}

			}
		}

		// height: 580rpx;
	}

	.bank-arrow {
		width: 20rpx;
		height: 28rpx;
	}

	.bank-icon {
		width: 46rpx;
		height: 46rpx;
	}
</style>
